<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { shoesizesQueryPage } from '@/api/shoesizes'


//请求参数数据模型
const queryPageParam = ref({
  sname:'',
  size:'',
  sex:'',
  pageNum: 1,
  pageSize: 5  // 默认每页5条
});
const snameValue = ref('')
const sexValue = ref('');
const sizeValue = ref('')
const shoesizesList = ref();
//选择适用性别事件
const handleSelectSex = (data) => {
  sexValue.value = data;
  // 这里可以添加其他业务逻辑
  
};
//选择尺码事件
const handleSelectSize = (data) => {
  sizeValue.value = data;
  // 这里可以添加其他业务逻辑

};
//输入名称事件
const inputSname = ( data ) =>{
  snameValue.value = data 
}
const clean = () =>{
  snameValue.value = ''
  sexValue.value = ''
  sizeValue.value = ''
  queryShoesizes()
}
//请求商品函数
function queryShoesizes(){
  queryPageParam.value.sname = snameValue.value
  queryPageParam.value.sex = sexValue.value
  queryPageParam.value.size = sizeValue.value
  console.log("query:" , queryPageParam.value )
  shoesizesQueryPage( queryPageParam.value )
  .then(response =>{
    //将数据赋值给数据模型
    console.log("data:" , response.list)
    shoesizesList.value = response.list
    console.log("shoesizes:" , shoesizesList.value)
    queryPageParam.value = response.pager
  }).catch(error=>{
    console.log('e')
  })
}
queryShoesizes()



</script>
<template>
  请输入商品名称：
  <el-input v-model="snameValue" @click="inputSname(snameValue)" style="width: 240px">{{ snameValue || '请选择' }}</el-input>
  请选择商品尺码：
  <el-dropdown placement="bottom-start" max-height="400px" trigger="click">
    <el-button>{{ sizeValue || '请选择' }}</el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="handleSelectSize('22')">22</el-dropdown-item>
          <el-dropdown-item @click="handleSelectSize('23')">23</el-dropdown-item>
          <el-dropdown-item @click="handleSelectSize('24')">24</el-dropdown-item>
          <el-dropdown-item @click="handleSelectSize('25')">25</el-dropdown-item>
          <el-dropdown-item @click="handleSelectSize('26')">26</el-dropdown-item>
          <el-dropdown-item @click="handleSelectSize('27')">27</el-dropdown-item>
          <el-dropdown-item @click="handleSelectSize('28')">28</el-dropdown-item>
          <el-dropdown-item @click="handleSelectSize('29')">29</el-dropdown-item>
          <el-dropdown-item @click="handleSelectSize('30')">30</el-dropdown-item>
          <el-dropdown-item @click="handleSelectSize('31')">31</el-dropdown-item>
          <el-dropdown-item @click="handleSelectSize('32')">32</el-dropdown-item>
          <el-dropdown-item @click="handleSelectSize('33')">33</el-dropdown-item>
          <el-dropdown-item @click="handleSelectSize('34')">34</el-dropdown-item>
          <el-dropdown-item @click="handleSelectSize('35')">35</el-dropdown-item>
          <el-dropdown-item @click="handleSelectSize('36')">36</el-dropdown-item>
          <el-dropdown-item @click="handleSelectSize('37')">37</el-dropdown-item>
          <el-dropdown-item @click="handleSelectSize('38')">38</el-dropdown-item>
          <el-dropdown-item @click="handleSelectSize('39')">39</el-dropdown-item>
          <el-dropdown-item @click="handleSelectSize('40')">40</el-dropdown-item>
          <el-dropdown-item @click="handleSelectSize('41')">41</el-dropdown-item>
          <el-dropdown-item @click="handleSelectSize('42')">42</el-dropdown-item>
          <el-dropdown-item @click="handleSelectSize('43')">43</el-dropdown-item>
          <el-dropdown-item @click="handleSelectSize('44')">44</el-dropdown-item>
          <el-dropdown-item @click="handleSelectSize('45')">45</el-dropdown-item>
          <el-dropdown-item @click="handleSelectSize('46')">46</el-dropdown-item>
          <el-dropdown-item @click="handleSelectSize('47')">47</el-dropdown-item>
          <el-dropdown-item @click="handleSelectSize('48')">48</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    请选择适用性别：
    <el-dropdown placement="bottom-start" max-height="400px" trigger="click">
      <el-button>{{ sexValue || '请选择' }}</el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="handleSelectSex('男')">男</el-dropdown-item>
        <el-dropdown-item @click="handleSelectSex('女')">女</el-dropdown-item>
        </el-dropdown-menu>
      </template>
      </el-dropdown>
  <el-button type="primary" round @click="queryShoesizes">点击查询数量</el-button>
  <el-button type="primary" round @click="clean">清空</el-button>
    <el-table :data="shoesizesList" style="width: 100%;margin: 20px auto">
        <el-table-column prop="shoes.sname" label="商品名称" width="300" />
        <el-table-column  prop="sizes.sizenum" label="尺码" width="120" /> 
        <el-table-column  prop="scount" label="库存数量" width="120" />
        <el-table-column prop="sstate" label="状态" width="150" />
        <el-table-column prop="shoes.sgender" label="性别" width="150" />
        <el-table-column prop="ssremarks" label="备注" width="150" />
        <el-table-column fixed="right" label="操作" min-width="200">
            <template #default="scope">
                 <el-button  type="primary" size="small">修改</el-button>
                 <!-- 删除按钮弹出气泡确认框 -->
                 <el-popconfirm title="确定要删除此商品吗?"
                                confirm-button-text="是"
                                cancel-button-text="否"
                                icon-color="red"
                                @confirm="deleteGoods(scope.$index, scope.row.goodsId)">
                    <template #reference>
                        <el-button  type="danger" size="small" >删除 </el-button>
                    </template>
                </el-popconfirm> 

            </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
          v-model:page-size="queryPageParam.pageSize"
          :total="queryPageParam.recordCount"
          v-model:current-page="queryPageParam.pageNum"
          @current-change="queryShoesizes"
          layout="total,prev,pager,next"
    />
</template>
<style>


</style>